<%--
  Created by IntelliJ IDEA.
  User: Anays
  Date: 2018/5/13
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function init(){

            ajaxCall("GET","MyServlet?method=getClazz",initClazz);
        }

        function initClazz(res) {
            var obj = JSON.parse(res);
            for ( var i in obj) {

                var sClazz=document.getElementById("sClass")
                sClazz.options.add(new Option(obj[i].name,obj[i].id));
            }
        }

        function ajaxCall(method, url ,callBackFunction) {
            var httprequest = new XMLHttpRequest();
            httprequest.onreadystatechange = function() {
                if (httprequest.readyState == 4 && httprequest.status == 200) {
                    callBackFunction(httprequest.responseText);
                }
            }
            httprequest.open(method, url, false);

            //httprequest.setRequestHeader("X-Requested-With", "AJAX");
            httprequest.send();

        }


        function searchStu(){
            var clazzId=document.getElementById("sClass").value;
            ajaxCall("GET","MyServlet?method=searchStu&clazzId="+clazzId,initStu);
        }

        function initStu(res){
            alert(res);
            var obj = JSON.parse(res);
            for ( var i in obj) {
                alert(obj[i].id+"  "+obj[i].name);
                var sClazz=document.getElementById("sStu")
                sClazz.options.add(new Option(obj[i].name,obj[i].id));
            }
        }

        function getStudentDetail(){
            var studentId=document.getElementById("sClass").value;
            ajaxCall("GET","MyServlet?method=searchStuDetail&studentId="+studentId,initStuTable);

        }
        
        function initStuTable(res) {
            var obj = JSON.parse(res);
            clearTable("t1");
            insertIntoTable(obj.id,obj.name,obj.clazzId);

        }


        function clearTable(tableName) {
            var tb = document.getElementById(tableName);
            var rowNum = tb.rows.length;
            for (i = 1; i < rowNum; i++) {
                tb.deleteRow(i);
                rowNum = rowNum - 1;
                i = i - 1;
            }
        }

        function insertIntoTable(cell1,cell2,cell3){
            var table=document.getElementById("t1");
            var newRow=table.insertRow(1);

            var y=newRow.insertCell(0);
            var z=newRow.insertCell(1);

            y.innerHTML=cell1;
            z.innerHTML=cell2;
            var x=newRow.insertCell(2);

            x.innerHTML="<input type='button' value='delete' onclick='deleteRow('+cell1+')' >";

        }

    </script>
</head>
<body onload="init()">

班级：<select id="sClass" onchange="searchStu()">
    <option></option>
</select>
<br>
学生：<select id="sStu" onchange="getStudentDetail()">
    <option></option>
</select>

<table id="t1">
   <tr> <th>id</th> <th>name</th> <th>classId</th></tr>

</table>

</body>
</html>
